<template>
	<view class="listDetails-content">
		
		<image :src="newInfo.img_url" class="details-video"></image>
		<view class="details-title text_black">
			{{newInfo.title}}
		</view>
		<view class="details-tips text_black" v-html="newInfo.content">
		</view>
		<video v-if="newInfo.video_url" :src="newInfo.video_url" class="details-video"></video>
	</view>
</template>

<script>
	import {getSchoolDetail,getSchoolBanner} from "../../static/js/api/plan.js";
	export default{
		data(){
			return{
				newInfo:{},
			}
		},
		onLoad(option) {
			if(option.linkUrl){
				this.getSchoolDetailInfo(option.linkUrl)
			}
			if(option.bannerId){
				this.getSchoolBannerInfo(option.bannerId)
			}
		},
		methods:{
			getSchoolDetailInfo(id){
				getSchoolDetail({
					school_id:id,
				}).then(res=>{
					this.newInfo = {
						img_url:res.school.school_logo,
						title:res.school.school_name,
						content:res.school.content,
					}
				})
			},
			getSchoolBannerInfo(id){
				getSchoolBanner({
					banner_id:id
				}).then(res=>{
					this.newInfo = {
						img_url:res.img,
						content:res.content,
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("./index.scss");
	.listDetails-content{
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.details-image{
		width: 100%;
		height:300rpx;
	}
	.details-video{
		width: 100%;
		height:420rpx;
	}
	.details-title{
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 30rpx;
		margin-top: 50rpx;
	}
	.details-tips{
		margin:20rpx 30rpx;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 56rpx;
		overflow-x: scroll;
	}
	.text_opblack{
		color: $uni-text-color-opblack;
	}
	.text_black{
		color: $uni-text-color-black;
	}
</style>